<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page trimDirectiveWhitespaces="true"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/jq-ingrid/css/ingrid.css" />
<link rel="stylesheet" type="text/css" href="js/jquery/css/ui-lightness/jquery-ui-1.8.7.custom.css" />
<link rel="stylesheet" type="text/css" href="css/board.css" />
<link rel="stylesheet" type="text/css" href="js/jalerts/jquery.alerts.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/jqgrid/css/ui.jqgrid.css" />
	
	<link rel="stylesheet" href="js/jdMenu/1.4.1/jquery.jdMenu.css" type="text/css" >
	
	



<script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jq-ingrid/js/jquery.ingrid.js"></script>
<script src="js/jquery/ui/jquery.ui.button.min.js"></script>
<script src="js/jalerts/jquery.alerts.js"></script>
<script src="js/board/board.js"></script>
<script src="js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/flexigrid/flexigrid.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jdMenu/1.4.1/jquery.dimensions-1.4.4.min.js"></script> 
	<script type="text/javascript" src="js/jdMenu/1.4.1/jquery.positionBy.js"></script> 
	<script type="text/javascript" src="js/jdMenu/1.4.1/jquery.bgiframe.js"></script> 
	<script type="text/javascript" src="js/jdMenu/1.4.1/jquery.jdMenu.js"></script> 

<script type="text/javascript" language="JavaScript">
var desc={<c:forEach var="desc" items="${requestScope.desc}">
"<c:out value="${desc.key}" />":"<table><tr><td width='80'><b>id</b></td><td>${desc.key}</td></tr><c:forEach var="descRow" varStatus="counter" items="${desc.value}"><tr><td width='80'><b><c:out value="${requestScope.desc.header[counter.count-1]}" /></b></td><td><c:out value="${descRow}" /><td></tr></c:forEach></table>",</c:forEach>
}
var hist={<c:forEach var="hist" items="${requestScope.history}">
"<c:out value="${hist.key}" />":"<table><c:forEach var="history" varStatus="counter" items="${hist.value}"><tr><td width='120'><c:out value="${history.date}" /></td><td width='180' ><c:out value="${history.user}" /><td></tr></c:forEach></table>",</c:forEach>
}
</script>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Target Board</title>
</head>
<body style="background-image: url('img/NSN_background.jpg');">
<div id="mainDiv">
<h1 class="ui-widget-header">Target Board<font size=3><ul class="jd_menu jd_menu_slate">
<li><a class="accessible">Edit</a>
<ul>
<li><a href="http://www.google.com">Users</a></li>
<li><a href="http://www.google.com">Data</a></li>
<li><a href="http://www.google.com">Reload</a></li>
</ul>
</ul></font></h1>
<Form action="Board" method="post" name="boardForm" id="mainForm">
<table id="mainTable">
	<tr>
		<td ROWSPAN=2>
		<div id="reservation" class="ui-widget-content">
		<h4 class="ui-widget-header">Reservation</h4>
		<table>
			<tr>
				TODO
			</tr>
			<tr align="right">
				<td align="left"><input id="unreserve" type="submit" name="button" value="Unreserve" onclick="validateUnreserve('boardForm');return false;"/></td><td><select id="user" name="user">
					<option></option>
					<c:forEach var="user" items="${requestScope.users}">
						<c:choose><c:when test="${requestScope.USER==user}"><option selected="selected""><c:out value="${user}" /></option></c:when> <c:otherwise><option><c:out value="${user}" /></option></c:otherwise></c:choose>
					</c:forEach>
				</select><input id="reserve" type="submit" name="button" value="Reserve" onclick="validateReserve('boardForm');return false;"/></td>
			</tr>
		</table>
</table>
</Form>
</div>
</body>
</html>